<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>考勤统计</title>
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/js.cookie.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/reset.css">
    <script src="js/bootstrap.min.js" ></script>
    <script src="js/bootstrap-datepicker.min.js"></script>
    <link href="css/bootstrap-datepicker.min.css" rel="stylesheet">
    <script>
        $(document).ready(
            function () {
                // 获取当前的年份和月份
                var now = new Date();
                var currentYear = now.getFullYear();
                var currentMonth = now.getMonth() + 1; // getMonth() 返回的月份是从0开始的，所以需要+1

                // 初始化日期选择器，默选当前月
                $('.datepicker').datepicker({
                    format: 'yyyy-mm',
                    startView: 'months',
                    minViewMode: 'months'
                }).on('changeDate', function (e) {
                    $(this).datepicker('hide');
                    searchAttendanceStatics();
                }).datepicker('setDate', new Date(currentYear, currentMonth - 1)); // 设置日期选择器的值为当前月份
            }
        );

        function searchAttendanceStatics() {
            var month = $('input[name="month"]').val();
            if (month) {
                $.ajax({
                    url: "/api/oaAttendanceRecordStatics/statics",
                    type: "POST",
                    data:  JSON.stringify({ month: month
                    }),
                    contentType: 'application/json',
                    success: function(response) {
                        var oaAttendanceRecordStatics = response.data;
                        var table = $('#attendanceRecords');
                        var html= '';
                        oaAttendanceRecordStatics.forEach(function(record) {
                            html += '<tr>' +
                                '<td>' + record.userName + '</td>' +
                                '<td>' + record.chuqincount + '</td>' +
                                '<td>' + record.totalTime + '</td>' +
                                '<td>' + ( record.late === null ? ' -- ' : record.late ) + '</td>' +
                                '<td>' + ( record.early === null ? ' -- ' : record.early) + '</td>' +
                                '<td>' + (record.qingjiacount ) + '</td>' +
                                '<td>' + (record.queqingcount ) + '</td>' +
                                '</tr>';
                        });
                        $('#attendanceRecords').html(html);
                    },
                    error: function(error) {
                        console.log(error);
                    }
                });
            }
        }
    </script>    <script>
    $(function () {
        $('#header').load('admin_header.html');
    })
</script>
</head>
<body>
<div id="header"></div>
<div class="container">
    <h2>考勤统计</h2>
    <form id="searchForm" onsubmit="return false;">
        <div class="input-group">
            <input type="text" class="form-control datepicker" name="month" placeholder="选择月份">
            <span class="input-group-btn">
                <button class="btn btn-default" type="button" onclick="searchAttendanceStatics()">查询</button>
            </span>
        </div>
    </form>
    <table id="attendanceStaticsTable" class="table table-striped">
        <thead>
        <tr>
<%--            <th>人员信息表ID</th>--%>
            <th>员工名称</th>
            <th>出勤天数</th>
            <th>加班时长</th>
            <th>迟到天数</th>
            <th>早退天数</th>
            <th>请假天数</th>
            <th>缺勤天数</th>
        </tr>
        </thead>
        <tbody id="attendanceRecords">
        </tbody>
    </table>
</div>
</body>
</html>
